<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      canvas {
        width: 100%;
        height: 100%;
      }
      .menu {
        position: absolute;
        top: 0;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <div class="menu">
      <button onclick="start()">开始计算</button>
      <button onclick="pause()">暂停</button>
      <button onclick="stop()">停止计算</button>
    </div>
  </body>

  <script type="module">
    import MyCanvas from './myCanvas.js'
    import Cellualr from './cellualr.js'

    let baseCanvas = new MyCanvas()
    baseCanvas.initCanvas('canvas')
    baseCanvas.setGridWidth(50)
    baseCanvas.initGrid()

    let timer = null
    const cellualr = new Cellualr(baseCanvas.gridArray, baseCanvas.gridWidth)

    let isMouseMove = false
    initMouse()
    drawOverlay()

    function heightRect(point) {
      const gridPointIndex = cellualr.findGridIndex({ x: point.x, y: point.y })
      baseCanvas.drawRect(
        cellualr.gridArray[gridPointIndex[0]][gridPointIndex[1]][0],
        cellualr.gridArray[gridPointIndex[0]][gridPointIndex[1]][1],
        cellualr.rectWidth,
        cellualr.rectWidth,
        'red'
      )
    }

    function testDrawPoint() {
      let testArray = [
        {
          x: 375,
          y: 375,
          row: 7,
          column: 7
        },
        {
          x: 375,
          y: 325,
          row: 7,
          column: 6
        },
        {
          x: 425,
          y: 325,
          row: 8,
          column: 6
        },
        {
          x: 475,
          y: 325,
          row: 9,
          column: 6
        },
        {
          x: 475,
          y: 375,
          row: 9,
          column: 7
        },
        {
          x: 475,
          y: 425,
          row: 9,
          column: 8
        },
        {
          x: 475,
          y: 475,
          row: 9,
          column: 9
        },
        {
          x: 425,
          y: 525,
          row: 8,
          column: 10
        }
      ]
      baseCanvas.drawPointArray(testArray, 10, 'green')
    }

    function initMouse() {
      baseCanvas.canvas.onclick = e => {
        cellualr.addPoint(e.x, e.y)
      }
      baseCanvas.canvas.onmousemove = e => {
        // heightRect({ x: e.x, y: e.y })
      }
    }

    function drawToolOverlay() {}

    window.start = () => {
      timer = setInterval(() => {
        cellualr.calcByRule()
      }, 400)
    }

    window.stop = () => {
      clearInterval(timer)
      cellualr.pointArray = []
    }

    window.pause = () => {
      clearInterval(timer)
    }

    function drawOverlay() {
      baseCanvas.clearScreen(window.innerWidth, window.innerHeight)
      baseCanvas.drawGrid()
      baseCanvas.drawPointArray(cellualr.pointArray, 20, 'red')
      testDrawPoint()
      requestAnimationFrame(drawOverlay)
    }
  </script>
</html>
